import React from 'react'
import { View, Input, Text } from '@tarojs/components'
import "taro-ui/dist/style/components/input.scss";
import "taro-ui/dist/style/components/icon.scss";
import './index.scss'
const index = (props) => {
    const { data = {}, index, ChangeValue } = props
    const {
        title,
        label,
        require = false,
        desc,
        value = '',
        rule = 'number',
        font_rule,
        font_length
    } = data

    const ruleMessage = {
        number: "数字",
        mobile: "手机号",
        idCard: "身份证号",
        bankCard: "银行卡号",
        email: "邮箱"
    }[rule]
    const ruleChange = (num) => {
        const e = num
        if (!rule) {
            return ''
        }
        else if (rule === 'number' && !/^\d+$/.test(Number(e))) {
            return '请填写数字'
        }
        else if (rule === 'mobile' & ! /^1[3-9]\d{9}$/.test(e)) {
            return '请填写正确的手机号'
        }
        else if (rule === 'idCard' && !/^[1-9]\d{5}(18|19|20|21|22)?\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|[Xx])$/.test(e)) {
            return '请填写正确的身份证号'
        }
        else if (rule === 'bankCard' && !/^(?:13[0-9]|14[57]|15[0-3]|16[6]|17[6-8]|18[0-9]|19[8-9])[0-9]{8}$/.test(e)) {
            return '请填写正确的银行卡号'
        }
        else if (rule === 'email' && !/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,4})+$/.test(e)) {
            return '请填写正确的邮箱'
        }
        else {
            return ''
        }
    }
    const filterFont = (e) => {

        if (font_rule === 'more') {
            return ruleChange(e) + '(文字不能少于' + { font_length } + ')'
        }
        else if (font_rule === 'under' && value.length > font_length) {
            return ruleChange(e) + '(文字不能超过' + { font_length } + ')'
        }
        else {
            return ruleChange(e)
        }
    }
    return <View className='CollectWps_box_content'>
        <View className='CollectWps_label'>{require && <Text style={{ color: "red", right: 4 }}>*</Text>}{label}</View>
        <View className='CollectWps_desc'>{desc}</View>
        <View className='CollectWps_input'>
            <Input value={value} onInput={(e) => {
                ChangeValue({
                    index,
                    value: {
                        value: e.detail.value
                    }
                })
            }}> </Input>
        </View>
        {filterFont(value) && value && <View className='CollectWps_rule'>{filterFont(value)}</View>}
    </View>
}
export default index